<template>
	<responsivePopup @closePopup="closePopup">
		<view class="header">
			<waves class="progress">
				<uni-icons custom-prefix="iconfont" type="icon-icon" color="#ffffff" size="24"></uni-icons>
				<text class="titleText">{{ tabList[curTabIndex].name }}</text>
			</waves>
			<waves class="close" @onTap="closePopup">
				<uni-icons type="closeempty" color="#ADADC2" size="22"></uni-icons>
			</waves>
		</view>
		<view class="tabBox">
			<view class="tabMain">
				<waves :class="['tabItem', { 'tabSelect': curTabIndex === index }]" v-for="(item, index) in tabList"
					:key="'tab' + index" @onTap="changeTab(item, index)">
					{{ item.name }}
				</waves>
			</view>
		</view>
		<template v-if="!dataBack">
			<view class="modal__component p-loading-wrap">
				<image src="@/static/image/p-loading.gif" class="p-loading"></image>
			</view>
		</template>
		<template v-else>
			<view class="modal__component" v-if="curTabIndex === 0">
				<view class="mainBox">
					<view class="imageBox">
						<adaptCar :src="vipModal" paddingTop="49.2857%"></adaptCar>
					</view>
					<view class="userArea__userInfo text-white">
						<view> {{ $t('Page.home.ndvipdd') }} </view>
						<view v-if="dataBack"> {{ `${getPercentage(1)}%` }} </view>
					</view>
					<view class="progressBox">
						<progress :percent="curProgress" backgroundColor="#2b333b" activeColor="#1fff20"></progress>
					</view>
					<view class="levelBox">
						<view>
							<uni-icons type="star" size="16" color="#2F4553"></uni-icons>
							<text>VIP{{ realLevel }}</text>
						</view>
						<view>
							<uni-icons type="star" size="16" color="#C69C6D"></uni-icons>
							<text>VIP{{ nextLevel }}</text>
						</view>
					</view>
					<view class="userArea__userInfo text-white typing">
						<view> Code amount </view>
						<view v-if="dataBack"> {{ `${getPercentage(2)}%` }} </view>
					</view>
					<view class="progressBox">
						<progress :percent="curProgress2" backgroundColor="#2b333b" activeColor="#1fff20"></progress>
					</view>
				</view>
				<view class="describeMain">
					{{ $t('Page.user.ndjbstg') }}
				</view>
				<view class="bottomMain">
					<view class="tips">
						{{ $t('Page.user.syyjsdzz') }}
					</view>
				</view>
			</view>
			<view class="modal__component" v-else-if="curTabIndex === 1">
				<view class="title">
					VIP
					<text class="cur-level">{{ realLevel }}</text>
					{{$t('Page.user.ly')}}
				</view>
				<view class="q-card">
					<view class="row">
						<text class="left">Max Day Withdraw Count</text>
						<text class="right">{{ withdraw_num }}</text>
					</view>
					<view class="row">
						<text class="left">One Time Max Withdraw</text>
						<view class="right">
							<text>{{ maxprice }}</text>
							<image class="coin-icon" src="@/static/coin.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="modal__component" v-else-if="curTabIndex === 2">
				<view class="q-list-wrap">
					<view class="q-list">
						<uni-collapse>
							<uni-collapse-item titleBorder="none" :border="false" v-for="item, index in levelList">
								<template v-slot:title>
									<view class="q-header">
										<view class="header-l">
											<uni-icons type="star" size="30" color="#FED100"></uni-icons>
											<text>vip{{ item.grade }}</text>
										</view>
									</view>
								</template>
								<view class="q-content">
									<!-- 需要投注/之前的打码量 -->
									<view class="q-row" v-if="index !== 0">
										<text>Require Bet</text>
										<view class="q-row-r">
											<text>{{ item.game_total }}</text>
											<image class="coin-icon" src="@/static/coin.png"></image>
										</view>
									</view>
									<!-- 需要充值 -->
									<view class="q-row" v-if="index !== 0">
										<text>Require Recharge</text>
										<view class="q-row-r">
											<text>{{ item.recharge_total }}</text>
											<image class="coin-icon" src="@/static/coin.png"></image>
										</view>
									</view>
									<view class="q-row">
										<text>Max Day Withdraw Count</text>
										<text>{{ item.withdraw_num }}</text>
									</view>
									<view class="q-row">
										<text>Max Withdraw</text>
										<view class="q-row-r">
											<text>{{ item.withdraw_total }}</text>
											<image class="coin-icon" src="@/static/coin.png"></image>
										</view>
									</view>
								</view>
							</uni-collapse-item> </uni-collapse>
					</view>
				</view>
			</view>
		</template>
	</responsivePopup>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		data() {
			return {
				vipModal: require('@/static/image/vip-modal.png'),
				star: require('@/static/image/star.png'),
				tabList: [{
					name: this.$t('Page.home.jd')
				}, {
					name: this.$t('Page.home.wdxy')
				}, {
					name: this.$t('Page.home.gdvipfl')
				}],
				curTabIndex: 0,
				curProgress: 0,
				curProgress2: 0,
				levelList: {},
				userInfo: {},
				charge: '',
				realLevel: 0,
				nextLevel: 0,
				currentLevelInfo: '',
				dataBack: false,
				withdraw_num: 0,
				maxprice: 0
			}
		},
		methods: {
			changeTab(item, index) {
				this.curTabIndex = index
			},

			closePopup() {
				this.curTabIndex = 0
				this.$emit('closePopup', false)
			},

			getPercentage(index) {
				if (index === 1) {
					const charged = this.userInfo.chargeseting.charge //用户已充值金额
					this.curProgress = (charged / this.currentLevelInfo.recharge_total) > 1 || this.currentLevelInfo
						.recharge_total == 0 ?
						100 : charged / this.currentLevelInfo.recharge_total * 100
					return this.curProgress
				} else if (index === 2) {
					const coding = this.userInfo.gametotal //用户打码量  
					this.curProgress2 = (coding / this.currentLevelInfo.game_total) > 1 || (+this.currentLevelInfo
							.game_total === 0) ?
						100 : coding / this.currentLevelInfo.game_total * 100
					return this.curProgress2
				}

			},

			getWalletInfo() {
				const {
					USERWALLET
				} = this.$api
				sendMessage({
					flag: USERWALLET
				})
				uni.$once(USERWALLET, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.dataBack = true
						this.levelList = data.levellist
						this.realLevel = data.userinfo.level.grade
						this.withdraw_num = data.userinfo.level.withdraw_num
						this.maxprice = data.userinfo.withdrawseting.maxprice
						this.nextLevel = this.realLevel < this.levelList.length ? (this.realLevel + 1) : 'No more'
						this.userInfo = data.userinfo
						this.charge = data.userinfo.charge
						this.currentLevelInfo = this.levelList[this.realLevel]
					} else {
						this.dataBack = false
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.header {
		border-radius: inherit;
		padding: 8px 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.progress {
			border-radius: 28px;
			background: #1e232a;
			padding: 4px 16px;
			min-height: 2.572em;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			.titleText {
				margin-left: 6px;
				font-weight: 600;
			}
		}

		.close {
			border-radius: 50%;
			font-size: 12px;
			min-width: 3em;
			min-height: 3em;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.tabBox {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.tabMain {
			border-radius: 28px;
			display: flex;
			padding: 4px 4px;
			background: #242a32;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);

			.tabItem {
				padding: 4px 16px;
				min-height: 2.572em;
				border-radius: inherit;
				font-size: 1em;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}

			.tabSelect {
				background: #2b333b;
			}
		}
	}

	.p-loading-wrap {
		width: 100%;
		display: flex;
		justify-content: center;

		.p-loading {
			width: 80px;
			height: 72px;
			margin: 50px auto;
		}
	}

	.modal__component {
		width: 500px;
		padding-bottom: 24px;

		.q-list-wrap {
			max-height: calc(100vh - 48px);
			vertical-align: top;
			padding: 24px 24px 0;

			.q-list {
				display: flex;
				flex-direction: column;

				.uni-collapse {
					background-color: #1e232a;
					max-height: 60vh;
					overflow-y: scroll;
				}

				.uni-collapse-item {
					margin-bottom: 20px;
					background-color: #242A32;
					box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
				}

				.q-header {
					display: flex;
					align-items: center;

					padding: 16px;

					.header-l {
						display: flex;
						align-items: center;
					}
				}

				.q-content {
					background-color: #242A32;
					color: #fff;
					padding: 16px;
					border: none;
					color: #adadc2;

					.q-row {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #adadc2;
						font-size: 14px;
						font-weight: 600;
						margin-bottom: 10px;

						.q-row-r {
							display: flex;
							align-items: center;

							.coin-icon {
								width: 30px;
								height: 30px;
								margin-left: 8px;
							}
						}
					}
				}
			}
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 24px 0 10px 0;
			font-size: 20px;
			color: #adadc2;

			.cur-level {
				margin: 0 2px;
			}
		}

		.q-card {
			width: calc(100% - 50rpx);
			margin: 0 auto;
			box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
			border-radius: 4px;
			vertical-align: top;
			padding: 16px 16px 6px;
			box-sizing: border-box;

			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #adadc2;
				font-size: 14px;
				border-bottom: 1px solid #2b333b;
				padding-bottom: 10px;
				margin-bottom: 10px;

				.left {
					margin-left: 8px;
				}

				.right {
					display: flex;
					align-items: center;

					.coin-icon {
						width: 30px;
						height: 30px;
						margin-left: 8px;
					}
				}
			}
		}

		.mainBox {
			padding: 16px;

			.imageBox {
				width: 280px;
				margin: 0 auto;
			}

			.userArea__userInfo {
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.progressBox {
				margin: 4px 0;
				border-radius: 4px;

				/deep/.uni-progress {
					border-radius: inherit;
				}

				/deep/.uni-progress-bar {
					border-radius: inherit;
					height: 1em !important;
				}

				/deep/.uni-progress-inner-bar {
					border-radius: inherit;
				}
			}

			.typing {
				margin-top: 30px;
			}

			.levelBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.describeMain {
			padding: 0 16px;
		}

		.bottomMain {
			padding: 24px 24px 0;

			.tips {
				border: 2px dotted;
				padding: 8px;
				border-radius: 4px;
			}
		}
	}


	@media screen and (max-width: 768px) {
		.modal__component {
			width: 100% !important;
		}
	}
</style>